@charset 'utf-8';
@import 'reset';
html,body,#web{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
//  overflow-y: scroll;
//  -webkit-overflow-scrolling: touch;
    overflow: hidden;
}



.swiper-container{
    width: 100%;
    height: 100%;
    position: relative;
}
.page{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.page1{
    background: url(../img/index/web_bg_01.png) 0 0 no-repeat;
    background-size: 100% 100%;
    header{
        width: 100%;
        height: r(111px);
        padding-top: r(45px);
        .logo{
            width: r(198px);
            height: r(66px);
            margin-left: r(64px);
            img{
                width: 100%;
                height: 100%;
            }
        }
        
        .title{
            width: r(141px);
            height: r(155px);
            position: absolute;
            top: 0;
            right: 9.3%;
            img{
                width: 100%;
                height: auto;
            }
        }
        
    }
    
    .content{
        .germany_bg{
            width: 100%;
            height: r(372px);
            background-image:url(../img/index/germany_bg_01.jpg);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: contain;
            position: relative;
            overflow: hidden;
        }
        
        
        
        .germany_font{
            width: r(228px);
            height: r(188px);
            position: absolute;
            left: 50%;
            top: 12.5%;
            margin-left: r(-114px);
            img{
                width: 100%;
                height: auto;
            }
        }
        
        .product{
            width: r(516px);
            height: r(407px);
            margin: 0 auto;
            background: url(../img/index/product_bg.png) 0 0 no-repeat;
            background-size: contain;
            position: relative;
            bottom: r(20px);
            z-index: 10;
        }
        
        .germany_bg::before{
            content: '';
            width: 0;
            height: 0;
            display: inline-block;
            border-left: r(262px) solid transparent;
            border-right: r(262px) solid #cd151e;
            border-bottom: r(148px) solid transparent;
            border-top: r(148px) solid transparent;
            position: absolute;
            bottom: r(-148px);
            right: 0;
            z-index: 5;
        }
        
        .product_title{
            width: 90%;
            font-size: 30px;  
            padding-top: r(22px);
        
            .title_left{
                width: 30%;
                height: 100%;
                font-size: 27px;
                line-height: 27px;
                text-align: right;
            }
            
            .title_right{
                width: 70%;
                height: 100%;
                line-height: 12.5px;
                font-size: 12.5px;
                p{
                    margin-top: 4px;
                    letter-spacing: 1px;
                    span{
                        background: #ce131e;
                        border-radius: 2px;
                        padding: 0;
                        color: white;
                        letter-spacing: 0;
                    }
                }
            }
        }
        
        .product_intro{
            width: 90%;
            height: r(300px);
            margin: 0 auto;
            display: flex;
            align-items: center;
            margin-top: 5px;
            >li{
                width: 30%;
                height: 100%;
                flex: 1;
            }
            
            li:nth-child(2){
                margin-left: r(10px);
                margin-right: r(10px);
            }
            
            .intro_title{
                font-size: 12px;
                text-align: center;
            }
    
            .product_img {
                width: 100%;
                height: 80%;
                position: relative;
                margin-top: r(10px);
                > p{
                    width: 100%;
                    height: 20%;
                    font-size: 5px;
                    background: white;
                    position: absolute;
                    bottom: 0;
                }
            }
            
            .img_1{
                background:url(../img/index/baby.jpg) 0 0 no-repeat;
                background-size: contain;
            }
            
            .img_2{
                background: url(../img/index/germany_man.jpg) 0 0 no-repeat;
                background-size: contain;
            }
            
            .img_3{
                background: url(../img/index/germany_girl.jpg) 0 0 no-repeat;
                background-size: contain;
            }
        }
    }
    
    
    footer{
        width: r(252px);
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: r(-126px);
        transform: scale(.8);
        z-index: 10;
        img{
            width: 100%;
            height: auto;
        }
    }
}

@media screen and (max-width: 321px){
    .page2,.page3,.page4{
          background: #fbf5e9;
          header{
              width: 100%;
              height: r(381px);
                
              .logo{
                    width: r(198px);
                    height: r(66px);
                    margin-left: r(64px);
                    margin-top: r(50px);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                
               .description{
                  width: r(218px);
                  height: r(171px);
                  margin-left: r(54px);
                  margin-top: r(38px);
                  img{
                      width: 100%;
                      height: auto;
                  }
               } 
               
               .pic{
                   width: r(339px);
                   height: r(348px);
                   margin-top: r(25px);
                   img{
                       width: 100%;
                       height: auto;
                   }
               }
             
          }
  
  .content{
      width: 100%;
      transform: scale(1.3);
      img{
          width: 100%;
          height: auto;
      }
  }
  
   footer{
        width: r(252px);
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: r(-126px);
        transform: scale(.8);
        z-index: 21;
        img{
            width: 100%;
            height: auto;
        }
    }
    
    .selling_product{
        width: r(578px);
        height: r(549px);
        position: absolute;
        left: 50%;
        top: 34%;
        z-index: 20;
        margin-left: r(-289px);
        
        row{
            width: 100%;
        }
        .product{
            width: r(273px);
            height: r(292px);
            box-sizing: border-box;
            background: #efc01c;
            position: relative;
            .product_img{
               width: r(210px);
               height: r(210px);
               margin: 0 auto;
               transform: scaleY(.8);
               background: white;
               a{
                   display: inline-block;
                   width: 100%;
                   height: 100%;
                   text-align: center;
                   
                   >img{
                        width: 80%;
                        height: 100%;
                    }
               }
                
            }
            p{
                
                font-size: 12px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                transform: scaleX(.8);
                position: absolute;
                bottom: 22%;
                width: 140px;
            }
            h4{
                font-size: 12px;
                background: white;
                transform: scale(.8);
                position: absolute;
                bottom: 1%;
                i{
                    color: #d70511;
                    font-size: 12px;
                    font-style: normal;
                }
                del{
                    color: #bbbbbb;
                } 
            }
            
            
        }
        
       
        .product_1{
            margin-right: r(5.5px);
        }
        .product_2{
            margin-left: r(5.5px);
        }
        .product_3{
            margin-top: r(5.5px);
            margin-right: r(5.5px);
        }
        .product_4{
            margin-top: r(5.5px);
            margin-left: r(5.5px);
        }
    }
}
}


.page2,.page3,.page4{
  background: #fbf5e9;
  header{
      width: 100%;
      height: r(381px);
        
      .logo{
            width: r(198px);
            height: r(66px);
            margin-left: r(64px);
            margin-top: r(50px);
            img{
                width: 100%;
                height: 100%;
            }
        }
        
       .description{
          width: r(218px);
          height: r(171px);
          margin-left: r(54px);
          margin-top: r(38px);
          img{
              width: 100%;
              height: auto;
          }
       } 
       
       .pic{
           width: r(339px);
           height: r(348px);
           margin-top: r(25px);
           img{
               width: 100%;
               height: auto;
           }
       }
     
  }
  
  .content{
      width: 100%;
      transform: scale(1.3);
      img{
          width: 100%;
          height: auto;
      }
  }
  
   footer{
        width: r(252px);
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: r(-126px);
        transform: scale(.8);
        z-index: 21;
        img{
            width: 100%;
            height: auto;
        }
    }
    
    .selling_product{
        width: r(578px);
        height: r(549px);
        position: absolute;
        left: 50%;
        top: 34%;
        z-index: 20;
        margin-left: r(-289px);
        
        row{
            width: 100%;
        }
        .product{
            width: r(273px);
            height: r(292px);
            box-sizing: border-box;
            background: #efc01c;
            position: relative;
            .product_img{
               width: r(210px);
               height: r(210px);
               margin: 0 auto;
               transform: scaleY(.8);
               background: white;
               a{
                   display: inline-block;
                   width: 100%;
                   height: 100%;
                   text-align: center;
                   
                   >img{
                        width: 80%;
                        height: 100%;
                    }
               }
                
            }
            p{
                
                font-size: 12px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                transform: scaleX(.8);
                
            }
            h4{
                font-size: 12px;
                background: white;
                transform: scale(.8);
                
                i{
                    color: #d70511;
                    font-size: 12px;
                    font-style: normal;
                }
                del{
                    color: #bbbbbb;
                } 
            }
            
            
        }
        
       
        .product_1{
            margin-right: r(5.5px);
        }
        .product_2{
            margin-left: r(5.5px);
        }
        .product_3{
            margin-top: r(5.5px);
            margin-right: r(5.5px);
        }
        .product_4{
            margin-top: r(5.5px);
            margin-left: r(5.5px);
        }
    }
}
  
.page2{
    .pic{
        transform: scale(.8);
    }
}

  
.page5{
    background: url(../img/index/web_bg_01.png) 0 0 no-repeat;
    background-size: 100% 100%;
    header{
          width: 100%;
          height: r(165px);
          padding-top: r(50px);
          box-sizing: border-box;
          .logo{
            width: r(198px);
            margin-left: r(64px);
            
           &>img{
                width: 100%;
                height: auto;
            }
        }
      }
      
      >.content{
          width: 100%;
          margin: 0 auto;
          >.notice{
              width: 80%;
              margin: 0 auto;
              &>img{
                  width: 100%;
                  height: auto;
              }
          }
          
          >.gift{
              width: 80%;
              margin: 0 auto;
              margin-top: r(35px);
              &>img{
                  width: 100%;
                  height: auto;
              }
          }
      }
      
      footer{
        width: r(252px);
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: r(-126px);
        transform: scale(.8);
        z-index: 10;
        img{
            width: 100%;
            height: auto;
        }
    } 
}


.page6,.page7{
    background: #fbf5e8;
    header{
      width: 100%;
      height: r(381px);
        
      .logo{
            width: r(198px);
            height: r(66px);
            margin-left: r(64px);
            margin-top: r(50px);
            img{
                width: 100%;
                height: 100%;
            }
        }
     
    }
    
    .content{
        width: 88%;
        position: relative;
        margin: 0 auto;
        top: -35%;
        img{
            width: 100%;
            height: auto;
        }
        .germany_font_2{
            width: r(228px);
            height: r(188px);
            position: absolute;
            left: 50%;
            top: 20.5%;
            margin-left: r(-114px);
           
            img{
                width: 100%;
                height: auto;
                 transform: scale(.8);
            }
        }
        
    }
    
    >footer.qr_code{
            width: r(199px);
            height: r(199px);
            position: absolute;
            bottom: 2%;
            left: 50%;
            margin-left: r(-99.5px);
            img{
                width: 100%;
                height: auto;
            }
    }


    >.desc{
        width: r(377px);
        position: absolute;
        left: 50%;
        bottom: 28%;
        margin-left: r(-188.5px);
        h4{
            width: 100%;
            font-size: 14px;
            text-align: center;
        }
    }
}
